
<template >
  <div style="background-color: #f3f3f3" v-if="currentResume">
    <div style="background-color: white;
    width: 1000px;
    margin: 0 auto;">
      <!--  基本信息-->
      <div class="baseInfo">
        <el-row style="width: 100%;height: 100%">
          <el-col :span="6">
            <div class="infoImg">
              <img :src="photoImgUrl+currentResume.photoImgUrl" style="width: 100%;height: 100%">
            </div>
          </el-col>
          <el-col :span="18" class="myInfo">
            <div style="color: white;font-weight: bold;font-size: 25px">{{currentResume.name}}</div>
            <span>爱好</span>
            <br>
            <span>生日：{{currentResume.birthday}} |</span>
            <span>性别：{{currentResume.gender}} |</span>
            <span>学历：{{}} |</span>
            <span>年限：{{}} |</span>
            <span>现居城市：{{currentResume.city}} |</span>
            <span>家乡：{{}} |</span>
          </el-col>
        </el-row>
      </div>
      <el-divider style="color: #409EFF"></el-divider>
      <!--  联系方式-->
      <div class="contact">
        <el-row style="width: 100%;height: 100%">
          <el-col :span="6" style="margin-top: 20px">
            <el-icon style="font-size: 25px"><PhoneFilled /></el-icon>
            <span style="font-size: 25px">联系方式</span>
          </el-col>
          <el-col :span="18" class="contactInfo">
            <span>电话：{{currentResume.userContact}} |</span>
            <span>微信：{{currentResume.wechat}} |</span>
            <span>邮箱：{{currentResume.email}} |</span>
          </el-col>
        </el-row>
      </div>
      <!--  求职意向-->
      <div class="contact">
        <el-row style="width: 100%;height: 100%">
          <el-col :span="6" style="margin-top: 20px">
            <el-icon style="font-size: 25px"><Platform /></el-icon>
            <span style="font-size: 25px">求职意向</span>
          </el-col>
          <el-col :span="18" class="contactInfo">
            <span>期望职位：{{currentResume.jobExpectation}} |</span>
            <span>工作地点：{{}} |</span>
            <span>薪资：{{currentResume.salaryExpectation}} |</span>
          </el-col>
        </el-row>
      </div>
      <!--  工作经历-->
      <div class="workExperience">
        <el-row style="width: 100%;height: 100%">
          <el-col :span="6" style="margin-top: 20px">
            <el-icon style="font-size: 25px"><Suitcase /></el-icon>
            <span style="font-size: 25px">工作经历</span>
          </el-col>
          <el-col :span="18" class="workExperienceInfo">
            <span>公司：苏州探寻文化科技有限公司 |</span>
            <span>职位：java开发工程师 |</span>
            <span style="margin-left: 100px">时间：2018-至今 |</span>
            <br>
            <span>工作内容：</span>
            <div style="width: 80%;height: 150px;padding:20px;border: 1px black solid;font-size: 15px;color: #666666">
              1、制定周计划，根据周计划分解日工作内容，并分责到企划部每个岗位上；
              <br>
              2、关注企划人员的工作、思想、生活状态，鼓励部门人员积极工作、学习；
              <br>
              3、认真执行公司的营销方案，保证方案能够快速、到位执行，（方案制定、微信、微博、抖音、VUE、Quik活动视频制作与推广）；
              <br>
              4、节假日、热门事件，微信、微博、海报制作与推广；
              <br>
              5、每天编辑优品库商城微信文章、每周编辑优品库微信公众号服务号文章；
            </div>
          </el-col>
        </el-row>
      </div>
      <!--  项目经历-->
      <div class="workExperience">
        <el-row style="width: 100%;height: 100%">
          <el-col :span="6" style="margin-top: 20px">
            <el-icon style="font-size: 25px"><Suitcase /></el-icon>
            <span style="font-size: 25px">项目经历</span>
          </el-col>
          <el-col :span="18" class="workExperienceInfo">
            <span>项目名： |</span>
            <span>职位：java开发工程师 |</span>
            <br>
            <span>项目内容：</span>
            <div style="width: 80%;height: 150px;padding:20px;border: 1px black solid;font-size: 15px;color: #666666">
              1、制定周计划，根据周计划分解日工作内容，并分责到企划部每个岗位上；
              <br>
              2、关注企划人员的工作、思想、生活状态，鼓励部门人员积极工作、学习；
              <br>
              3、认真执行公司的营销方案，保证方案能够快速、到位执行，（方案制定、微信、微博、抖音、VUE、Quik活动视频制作与推广）；
              <br>
              4、节假日、热门事件，微信、微博、海报制作与推广；
              <br>
              5、每天编辑优品库商城微信文章、每周编辑优品库微信公众号服务号文章；
            </div>
          </el-col>
        </el-row>
      </div>
      <!--  教育经历-->
      <div class="contact">
        <el-row style="width: 100%;height: 100%">
          <el-col :span="6" style="margin-top: 20px">
            <el-icon style="font-size: 25px"><PhoneFilled /></el-icon>
            <span style="font-size: 25px">教育经历</span>
          </el-col>
          <el-col :span="18" class="contactInfo">
            <span>大学：{{}} |</span><br>
            <span>时间：{{}} |</span>
            <span>专业：{{}} |</span>
            <span>学历性质：{{}} |</span>
          </el-col>
        </el-row>
      </div>
      <!--  培训经历-->
      <div class="workExperience">
        <el-row style="width: 100%;height: 100%">
          <el-col :span="6" style="margin-top: 20px">
            <el-icon style="font-size: 25px"><Suitcase /></el-icon>
            <span style="font-size: 25px">培训经历</span>
          </el-col>
          <el-col :span="18" class="workExperienceInfo">
            <span>达内教育 |</span>
            <span>UI设计 |</span>
            <span style="margin-left: 100px">时间：2018-至今 |</span>
            <br>
            <span>培训内容：</span>
            <div style="width: 80%;height: 150px;padding:20px;border: 1px black solid;font-size: 15px;color: #666666">
              第一阶段：软件基础及平面手绘手绘、PS & AI软件学习平面设计；
              <br>
              第二阶段：电商广告创意设计、黄金分割法则、电商广告设计思路、视觉广告创意；
              <br>
              第三阶段：网页版式设计与配色技巧、WEB网页设计规范、色彩理论与设计心理学、网页用户体验设计；
              <br>
              第四阶段：移动端UI界面设计、Experience design学习、图标绘制；
              <br>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--  证书奖励-->
      <div class="workExperience">
        <el-row style="width: 100%;height: 100%">
          <el-col :span="6" style="margin-top: 20px">
            <el-icon style="font-size: 25px"><Suitcase /></el-icon>
            <span style="font-size: 25px">证书奖励</span>
          </el-col>
          <el-col :span="18" class="workExperienceInfo">
            <span>2018.02.06 |</span>
            <span>大学大学 |</span>
            <span>国家励志奖学金 |</span>
            <br>
            <span>2018.02.06 |</span>
            <span>大学大学 |</span>
            <span>国家励志奖学金 |</span>
            <br>
            <span>2018.02.06 |</span>
            <span>大学大学 |</span>
            <span>国家励志奖学金 |</span>
            <br>
            <span>2018.02.06 |</span>
            <span>大学大学 |</span>
            <span>国家励志奖学金 |</span>
            <br>
          </el-col>
        </el-row>
        <div style="text-align: center">
          <span style="font-size: 20px">下载简历</span>
          <span
              style="font-size: 20px; cursor: pointer; margin-left: 10px;"
              @click="scrollToTop"
          >
      回到顶部
    </span>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup>
import { PhoneFilled,Suitcase,Platform } from '@element-plus/icons-vue'
import {computed, onMounted, ref} from 'vue';
import { useStore } from 'vuex';

const photoImgUrl=ref('http://localhost:9093/')
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动
  });
};
const store=useStore();
// const resumeData=computed(()=>store.state.resumeData);
const currentResume=computed(()=>store.state.currentResume);
// 打印数据（调试用）
const logData = () => {
  console.log('当前简历  数据:', store.state.currentResume);
};
onMounted(()=>{
  logData()
})
const age=ref(

)
</script>

<style scoped>
.baseInfo{
  margin: auto;
  width: 1000px;
  height: 150px;
  border: 1px solid black;
}
.infoImg{
  width: 129px;
  height: 124px;
  margin: 12px auto;
  border: 1px solid black;
}
.myInfo{
  height: 85%;
  margin: 11px 0px 0px 0px;
  padding: 10px;
  background-color: #409EFF;
  font-size: 15px;
  text-align: left;
}
.myInfo>span{
  margin-right: 10px;
  margin-top: 10px;
  color: white;
  font-size: 15px;
}
.contact{
  width: 1000px;
  height: 75px;
  border: 1px solid black;
}
.contactInfo{
  width: 100%;
  height: 30px;
  text-align: left;
  color: #666666;
  font-size: 15px;
  margin-top: 28px;
}
.contactInfo>span{
  margin-right: 10px;
}
.workExperience{
  width: 1000px;
  border: 1px solid black;
}
.workExperienceInfo{

  text-align: left;
  color: #666666;
  font-size: 15px;
  margin-top: 28px;
}
.workExperienceInfo>span{
  margin-right: 30px;
}
</style>